<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .screen{
            position: relative;
            margin: 100px auto;
            width: 800px;
            height: 800px;
            border: 2px black solid;
        }
        .ball{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
        }
        .ball2{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
<div class = "screen">
    <div class = "ball">1</div>
    <div class = "ball2">2</div>
</div>
<script>
    /*
    * 再加一个小球
    *
    * */
    let screen = document.querySelector(".screen")
    /*
    //将小球的各种属性抽象出来成为一个对象
    let ball = {
        el:document.querySelector(".ball"),
        x:123,
        y:235,
        vx:5,
        vy:7,
        upDate:upDate,
        render:render
    }
    let ball2 = {
        el:document.querySelector(".ball2"),
        x:255,
        y:233,
        vx:4,
        vy:2,
        upDate:upDate,
        render:render
    }

     */

    //一次性要生成10个小球

    //写一个函数 专门生产小球的抽象对象
    function creatBall(){
        //生成一个虚拟的div标签
        let ball = document.createElement("div")
        //添加到screen标签里面
        screen.appendChild(ball)
        return {
            el:ball,
            x:255,
            y:233,
            //随机数生成每个小球速率
            vx:4 * Math.random() - 1,
            vy:2 * Math.random() - 2,
            upDate:upDate,
            render:render
        }
    }

    let ballList = []
    for(let i = 0;i < 10;i++){
        ballList.push(creatBall()) //每一次执行creatBall函数，数组里面都会得到一个新的小球
    }

    //抽象出各个小球独自的渲染函数
    function upDate(){
        //实时渲染小球位置
        this.el.style.transform = `translate(${this.x}px,${this.y}px)`
    }

    //抽象出各个小球独自的运动函数
    function render(){
        //限制小球边界
        if(this.x > 700 || this.x < 0) this.vx *= -0.8
        if(this.y > 700 || this.y < 0) this.vy *= -0.8

        //修改盒子的位置
        this.x += this.vx
        this.y += this.vy

        //模拟小球每次在垂直方向上的重力衰减
        this.vy += 0.5*0.5
    }

    setInterval(function (){ //再将小球的渲染函数和运动函数分别作为回调函数传入定时器
        //ball.upDate() //运动函数更新小球ball实时状态
        //ball.render() //渲染函数渲染小球ball实时状态下的位置
        //ball2.upDate() //运动函数更新小球ball实时状态
        //ball2.render() //渲染函数渲染小球ball实时状态下的位置

        ballList.forEach(ball => {
            ball.upDate()
            ball.render()
        })

    },1000/60)
</script>
</body>
</html>